<script setup>
import { ref } from "vue";
import { getShopList } from "@/api";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  getShopList().then(res => {
    list.value = list.value.concat(res);
    loading.value = false;
    finished.value = true;
  });
};
</script>

<template>
  <div class="list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell center v-for="item in list" :key="item" :title="item.storeName">
        <template #title>
          <van-row>
            <van-col span="12">店铺名称: {{ item.storeName }}</van-col>
            <van-col span="12">店铺类型: {{ item.classify }}</van-col>
          </van-row>
          <van-row>
            <van-col span="12">经度: {{ item.longitude }}</van-col>
            <van-col span="12">纬度: {{ item.latitude }} </van-col>
          </van-row>
          <van-row>
            <van-col span="24">店铺地址: {{ item.address }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"> 填写人: {{ item.createBy }} </van-col>
            <van-col span="24"> 时间: {{ item.createTime }} </van-col>
          </van-row>
          <van-row>
            <van-col span="24">备注: {{ item.remark || "无" }}</van-col>
          </van-row>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<style scoped></style>
